<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">显示消息条</fu-button>
        <fu-snack-bar
          v-model:show="show1"
          message="这是一条消息提示"
        />
      </view>
    </view>
    
    <!-- 顶部展示 -->
    <view class="demo-block">
      <view class="demo-block__title">顶部展示</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true">顶部展示</fu-button>
        <fu-snack-bar
          v-model:show="show2"
          message="这是一条消息提示"
          position="top"
        />
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="demo-block">
      <view class="demo-block__title">操作按钮</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show3 = true">显示操作按钮</fu-button>
        <fu-snack-bar
          v-model:show="show3"
          message="这是一条消息提示"
          action="撤销"
          @action="onAction"
        />
      </view>
    </view>
    
    <!-- 自定义时长 -->
    <view class="demo-block">
      <view class="demo-block__title">自定义时长</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show4 = true">自定义时长</fu-button>
        <fu-snack-bar
          v-model:show="show4"
          message="这条消息会显示 10 秒"
          :duration="10000"
        />
      </view>
    </view>
    
    <!-- 不同主题 -->
    <view class="demo-block">
      <view class="demo-block__title">不同主题</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show5 = true" class="button-item">主要主题</fu-button>
        <fu-button type="success" @click="show6 = true" class="button-item">成功主题</fu-button>
        <fu-button type="warning" @click="show7 = true" class="button-item">警告主题</fu-button>
        <fu-button type="danger" @click="show8 = true" class="button-item">错误主题</fu-button>
        <fu-snack-bar
          v-model:show="show5"
          message="主要主题"
          type="primary"
          action="确定"
        />
        <fu-snack-bar
          v-model:show="show6"
          message="成功主题"
          type="success"
          action="确定"
        />
        <fu-snack-bar
          v-model:show="show7"
          message="警告主题"
          type="warning"
          action="确定"
        />
        <fu-snack-bar
          v-model:show="show8"
          message="错误主题"
          type="error"
          action="确定"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false
    }
  },
  methods: {
    onAction() {
      uni.showToast({
        title: '点击撤销',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    overflow: hidden;
    padding: 30rpx;
  }
}
</style> 